<html>
<head>
	<meta charset="utf-8" />
	<script>
	
	</script>
	<style>
		*{margin:0;padding:0;}
		#box{
			width:0;
			height:100%;
			position:fixed;
			right:0;
			top:0;
		}
		.wrap{
			border-left:6px solid #7a6e6e;
			position:absolute;
			right:0;
			top:0;
			width:0;
			height:100%;
		}
		.tab{
			position:absolute;
			top:50%;right:-6px;
			width:35px;
		}
		.tab div{
			width:35px;
			height:35px;
			margin-bottom:1px;
			position:relative;
			cursor:pointer;
			border-radius:3px 0 0 3px;
			background:#7a6e6e;
		}
		i{
			width:35px;
			height:35px;
			position:relative;
			display:inline-block;
			background:url(toolbars.png) no-repeat;
			
		}
		span{
			font-size:12px;
			position:absolute;
			left:35px;
			width:62px;height:35px;
			border-radius:3px 0 0 3px;
			text-align:center;
			line-height:35px;
			background-color:rgb(122,110,110);
			color:#fff;
		}
		.vip-div i{
			background-position:-88px -175px;
		}
		.shopping-div i{
			background-position:-50px -0px;
		}
		.follow-div i{
			background-position:-50px -50px;
		}
		.history-div i{
			background-position:-50px -100px;
		}
		.message-div i{
			background-position:-190px -150px;
		}
		.mast-div i{
			background-position:-50px -150px;
		}
		.right-wrap{
			width:270px;
			height:100%;
			position:absolute;
			left:0;
			top:0;
			background:#eceaea;
		}
		
	</style>
	<script src="jquery.js"></script>
	<script>
	(function(){
		$(function(){
			$('.tab div').hover(function(){
				$('span').eq($(this).index()).stop().animate({'left':-60})
				$('span').eq($(this).index()).css('backgroundColor','#c81623')
				$('i').eq($(this).index()).css('backgroundColor','#c81623')
			},
			function(){
				$('span').eq($(this).index()).stop().animate({'left':35})
				$('span').eq($(this).index()).css('backgroundColor','rgb(112,110,110)')
				$('i').eq($(this).index()).css('backgroundColor','rgb(112,110,110)')
			})
			$('.shopping-div').click(function(){ //console.log(123)
			$('.wrap').css('right',270)
		
			})
		});
		
	
	})(jQuery);
	
	</script>
</head>
<body>
	<div id="box">
		<div class="wrap">
			<div class="tab">
				<div class="vip-div">
					<span class="vip-txt">京东会员</span>
					<i class="tab-vip"></i>
				</div>
				<div class="shopping-div">
					<span class="shop-txt">购物车</span>
					<i class="tab-shop"></i>
				</div>
				<div class="follow-div">
					<span class="follow-txt">我的关注</span>
					<i class="tab-follow"></i>
				</div>
				<div class="history-div">
					<span class="history-txt">我的足迹</span>
					<i class="tab-history"></i>
				</div>
				<div class="message-div">
					<span >我的消息</span>
					<i></i>
				</div>
				<div class="mast-div">
					<span >资讯JIMI</span>
					<i></i>
				</div>
			</div>
			<div class="sub">
				<div class="sub-top">
					<span ></span>
					<i>顶部</i>
				</div>
				<div class="sub-bottom">
					<span ></span>
					<i>反馈</i>
				</div>
			</div>
			<div class="right-wrap">
				<div class="rw-shopping"></div>
				<div class="rw-history"></div>
			</div>
		</div>
		
		
	
	</div>
</body>
</html>